<template>
    <div class="module-box">
      <!-- 左侧 -->
    <div style="flex:0 1 25%;padding: 5px;">
        <dv-border-box-10 style="width:100%;height:215px;margin-right: 5px;margin-top: 5px;">
          <dv-active-ring-chart :config="config4" style="width:100%;height:215px;margin: 5px;" />
        </dv-border-box-10>

        <dv-border-box-10 style="width:100%;height:215px;margin-right: 5px;margin-top: 5px;">
          <LineChartVue :viewData = 'lineViewData'  style="width:300px;height:250px;margin-left: 20px;"></LineChartVue>
        </dv-border-box-10>

        <dv-border-box-10 style = "width: 100%;height: 215px;margin-right: 5px;margin-top: 5px;">
          <BarChart :barData = 'barViewData' style="width: 300px;height: 250px;margin-left: 20px;"></BarChart>
        </dv-border-box-10>
    </div>

    <!-- 中间 -->
    <div style="flex:0 1 50%;padding: 5px;">
        <dv-border-box-1 style="width:100%;height:215px;">
          <LineChartVue :viewData = 'lineView' style="width:100%; height:215px;"> </LineChartVue>
        </dv-border-box-1>

          <dv-flyline-chart :config="config5" style="width:100%;height:440px;" />

    </div>

    <!-- 右侧 -->
    <div style="flex:0 1 25%;padding: 8px;">
        <dv-border-box-10 :reverse="true" style="width:100%;height:215px;margin-right: 5px;margin-top: 5px;">
          <dv-active-ring-chart :config="config4" style="width:100%;height:215px;" />
        </dv-border-box-10>

        <dv-border-box-10 :reverse="true" style="width:100%;height:215px;margin-right: 5px;margin-top: 5px;">
          <PieChartVue :title = title style="width:100%;height:238px;"></PieChartVue>
        </dv-border-box-10>

        <dv-border-box-10 :reverse="true" style="width:100%;height:215px;margin-right: 5px;margin-top: 5px;">
          <DonutChartVue></DonutChartVue>
        </dv-border-box-10>
    </div>
  </div>
</template>

<script>
import LineChartVue from '../charts/LineChart.vue'
import DonutChartVue from '../charts/DonutChart.vue'
import PieChartVue from '../charts/PieChart.vue'
import BarChart from '@/charts/BarChart.vue'
import { getLineChartData } from '../api/LineChart'
import { getBarChartData } from '../api/BarChart'

export default {
  name: 'EchartBottom',
  components: {
    LineChartVue,
    DonutChartVue,
    BarChart,
    PieChartVue
  },
  data () {
    return {
      title: '查询方式',
      // tit: '销量',
      lineView: {
        date: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        data: [150, 230, 224, 218, 135, 147, 260]
      },
      lineViewData: {
        tit: '',
        data: [],
        date: []
      },
      barViewData: {
        title: '产品销量',
        data: [],
        date: []
      },
      config4: {
        data: [
          {
            name: '短袖',
            value: 1
          },
          {
            name: '短裤',
            value: 2
          },
          {
            name: '牛仔裤',
            value: 3
          },
          {
            name: '短裙',
            value: 4
          },
          {
            name: '短袜',
            value: 5
          },
          {
            name: '长裙',
            value: 6
          },
          {
            name: '衬衫',
            value: 7
          }
        ]
      },
      config5: {
        centerPoint: [0.48, 0.35],
        points: [
          {
            position: [0.52, 0.235],
            text: '新乡'
          },
          {
            position: [0.43, 0.29],
            text: '焦作'
          },
          {
            position: [0.59, 0.35],
            text: '开封'
          },
          {
            position: [0.53, 0.47],
            text: '许昌'
          },
          {
            position: [0.45, 0.54],
            text: '平顶山'
          },
          {
            position: [0.36, 0.38],
            text: '洛阳'
          },
          {
            position: [0.62, 0.55],
            text: '周口'
          },
          {
            position: [0.56, 0.56],
            text: '漯河'
          },
          {
            position: [0.37, 0.66],
            text: '南阳'
          },
          {
            position: [0.55, 0.81],
            text: '信阳'
          },
          {
            position: [0.55, 0.67],
            text: '驻马店'
          },
          {
            position: [0.37, 0.29],
            text: '济源'
          },
          {
            position: [0.20, 0.36],
            text: '三门峡'
          },
          {
            position: [0.76, 0.41],
            text: '商丘'
          },
          {
            position: [0.59, 0.18],
            text: '鹤壁'
          },
          {
            position: [0.68, 0.17],
            text: '濮阳'
          },
          {
            position: [0.59, 0.10],
            text: '安阳'
          }
        ],
        bgImgUrl: require('../assets/img/map.jpg'),
        flylineColor: '#fff',
        centerPointImg: {
          url: require('../assets/img/mapCenterPoint.png')
        },
        pointsImg: {
          url: require('../assets/img/mapPoint.png')
        }
      },
      timer: null // 添加一个变量来保存定时器
    }
  },
  methods: {
    getData () {
      getLineChartData().then(res => {
        this.lineViewData = res;
        this.lineViewData.tit = '销量折线图';
      }).catch((e) => { console.log(e) });
      getBarChartData().then(res => {
        this.barViewData = res;
        this.barViewData.title = '销量柱状图';
      }).catch((e) => { console.log(e) });
    }
  },
  created () {
    this.getData();
  },
  mounted () {
    // 设置定时器，每10秒调用一次getData方法
    this.timer = setInterval(() => {
      this.getData();
    }, 10000);
  },
  beforeDestroy () {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

}
</script>
<style scoped>
.module-box {
    width: 100%;
    height: 100%;
    display:flex;
    justify-content: space-between;
    /* margin:1px; */
    background: url('../assets/img/pageBg.png') no-repeat fixed center;
    background-size:100% 100%;
  }
</style>
